<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link href="../css/mui.min.css" rel="stylesheet"/>
	 <link rel="stylesheet" href="../css/base.css">
	 <script src="../js/vue.js"></script>
	<style>
		/* 当前页面内部样式 */
		.db-search{
			margin: .3rem .4rem 0;
		}
		.db-movie-list{
			/* margin-bottom: 1rem; */
		}
		.db-movie-list .mui-media-object{
			max-width: 1.4rem;
			width: 1.4rem;
			height: auto;
		}
		.db-movie-list .mui-media-body{
			font-size: .38rem;
			line-height: .5rem;
		}
		.db-movie-list .mui-media-body .mui-ellipsis span{
			color: #ff6464;
		}
	</style>
</head>
<body>
	<!-- 头部标题 -->
	<header class="mui-bar mui-bar-nav">
		<!-- <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> -->
		<h1 class="mui-title">热映</h1>
	</header>
	
	<!-- 内容主容器 -->
	<div class="mui-content" id="app">
		
		<!-- 搜索框 -->
		<div class="mui-input-row mui-search db-search">
			<input type="search" class="mui-input-clear" placeholder="电影/电视剧/影人">
		</div>
		
		<!-- 图文电影列表 -->
		<!--下拉刷新容器-->
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<ul class="mui-table-view mui-table-view-chevron db-movie-list">
					<li class="mui-table-view-cell mui-media" v-for="item in movies" :key="item.id" @tap="lookDetail(item.id)">
						<a class="mui-navigate-right">
							<img class="mui-media-object mui-pull-left" :src="item.images.large">
							
							<div class="mui-media-body">
								{{item.title}}
								<p class='mui-ellipsis'>{{item.genres}} <span>{{item.rating.average}}分</span></p>
								<p class='mui-ellipsis'>导演：{{item.directors2}}</p>
								<p class='mui-ellipsis'>主演：{{item.casts2}}</p>
							</div>
						</a>
					</li>
				</ul>
			</div>
		</div>
		
	</div>
	
	<script src="../js/mui.min.js"></script>
	
	<script type="text/javascript">
		
		mui.init();
		let moviesDeatil;
		mui.plusReady(function () {
		    
			moviesDeatil = plus.webview.getWebviewById('mDeatil');   // 详细页的窗口对象
			if(!moviesDeatil){
				console.log(1);
				// 预加载页面
				moviesDeatil = mui.preload({  // 【预加载】自动创建了窗口，加载了文件
					url:'../pages/moviesDeatil.html',
					id:'mDeatil'	// 这个也是webview的id
				})
			}
		})
		
		let APP = new Vue({
			el: '#app',
			data: {
				// 电影列表
				movies: [],
				pn: 1		// 页码，默认第1页
			},
			methods: {
				// 点击事件的方法
				lookDetail(id){
					
					// mui.fire(目标窗口的webview,'自定义事件名',{参数列表})
					mui.fire(moviesDeatil, 'getMovie', {mid: id})
					
					// mui 提供打开窗口的方法
					mui.openWindow({ // 打开窗口之前
						// url: '../pages/moviesDeatil.html'
						id: 'mDeatil'
					});
				}
			}
		});
		
		mui.init({
			pullRefresh: {
				container: '#pullrefresh',
				// 从上往下拉，下拉刷新
				down: {
					style:'circle',
					callback: pulldownRefresh		// 回调函数 pulldownRefresh
				},
				// 上下往上拉，上拉加载
				up: {
					auto:true,
					contentrefresh: '正在加载...',
					contentnomore: '已经到底了...',
					callback: pullupRefresh		// 回调函数 pullupRefresh
				}
			}
		});
		
		function pulldownRefresh(){
			// location.reload();
			
			// 允许上拉加载
			mui('#pullrefresh').pullRefresh().endPulldownToRefresh(false);
			
			// 重置页码为1
			APP.pn = 1;
			
			// 更改数组，清空数组
			APP.movies = [];
			
			// 调用上拉加载函数
			pullupRefresh();
		}
		
		function pullupRefresh(){
			// 请求豆瓣电影接口
			mui.getJSON('http://t.yushu.im/v2/movie/in_theaters',{
				start:(APP.pn-1)*10,	// 起始记录的下标，第1页第1条记录是 0
				count:10,	// 每页显示的条数
				city:'广州',
				apikey: '0df993c66c0c636e29ecbb5344252a4a'
			},function(data){	//json对象
				//服务器返回响应，根据响应结果，分析是否登录成功；
				// console.log(JSON.stringify(data));		// 输出json字符串进行调试
				// alert(1);
				
				// 电影总数
				let total = data.total;
				
				let subjects = data.subjects;
				if(subjects.length>0){
					
					// 对数据subjects进行相关内容的转换，如：剧情、导演、主演
					let directors;
					let casts;
					subjects.map(function(v){
						
						// 剧情
						v.genres = v.genres.join('/');
						
						// 导演名称
						directors = v.directors;
						let arr = [];
						directors.forEach(function(vv){
							// 数组追加
							arr.push(vv.name);  //  ["管虎","xxx"]
						})
						// 增加多一个导演下标
						v.directors2 = arr.join('/');
						
						// 演员名称
						casts = v.casts;
						let arr2 = [];
						casts.forEach(function(vvv){
							arr2.push(vvv.name);
						})
						// 增加多一个演员下标
						v.casts2 = arr2.join('/');
						
						return v;
					})
					
					// console.log(JSON.stringify(subjects));
					
					
					// 赋值(数组应该是追加数组)
					APP.movies = APP.movies.concat(subjects);
					
					// 页码加1
					APP.pn = APP.pn + 1;
					
					// 允许/停止上拉加载
					mui('#pullrefresh').pullRefresh().endPullupToRefresh(APP.movies.length>=total?true:false);
				}
			},function(xhr,type,errorThrown){
				//异常处理；
				console.log(type);
			});
			
			// 不支持跨域请求
			// mui.ajax('http://api.douban.com/v2/movie/in_theaters',{
			// 	data:{
			// 		start:0,
			// 		count:10,
			// 		city:'广州',
			// 		apikey: '0df993c66c0c636e29ecbb5344252a4a'
			// 	},
			// 	dataType:'json',//服务器返回json格式数据
			// 	type:'get',//HTTP请求类型
			// 	timeout:10000,//超时时间设置为10秒；
			// 	headers:{'Content-Type':'application/json'},	              
			// 	success:function(data){
			// 		//服务器返回响应，根据响应结果，分析是否登录成功；
			// 		alert(data);
			// 	},
			// 	error:function(xhr,type,errorThrown){
			// 		//异常处理；
			// 		console.log(type);
			// 	}
			// });
		}
	</script>
</body>
</html>